<template>
	<view class="dialog">
		<view class="dialog-content">
			<view class="content">
				<slot>
					<image src="/static/images/sign.png" mode=""></image>
					<view class="">不在打卡范围内</view>
					<view class="">地理位置错误</view>
				</slot>
			</view>
			<view class="btns">
				<view class="btns-item" @click="closed">取消</view>
				<view class="btns-item" @click="submit">确认打卡</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: { type: Boolean, default: false }
	}, 
	methods:{
		closed() {
			this.$emit('closed',false);
		},
		submit() {
			this.$emit('submit',true);
		}
	}
	
};
</script>

<style lang="scss" scoped>
.dialog {
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.3); //遮罩颜色
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	&-content {
		width: 506rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.content {
			width: 100%;
			padding: 30rpx 0;
			min-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			image {
				width: 64rpx;
				height: 64rpx;
				margin: 0rpx auto;
			}
			view:last-child {
				font-size: 24rpx;
				color: #e02020;
				padding-top: 5rpx;
			}
		}
		.btns {
			width: 100%;
			display: flex;
			border-top: 1rpx solid #f0f0f0;
			&-item {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				font-size: 30rpx;
				color: #999999;
			}
			&-item:nth-child(1) {
				border-right: 1rpx solid #f0f0f0;
				color: #0091ff;
			}
		}
	}
}
</style>
